<template>
<div>
    <!-- 头部 -->
     <div class="header">
         <span class="iconfont iconnew"></span>
              <div class="search"  @click="$router.push('/search')">
         <i class="iconfont iconsearch"></i>
         <span>搜索新闻</span>
     </div>
     <span class="iconfont iconwode" @click="$router.push('/userinfo')"></span>
     </div>
     <!-- tab标签页 -->
     <van-tabs sticky v-model="activeName">
  <van-tab v-for="item in cateList" :key="item.id" :title="item.name">
     
      <van-list
  v-model="item.loading"
  :finished="item.finished"
  finished-text="😜已经到底了"
  @load="onLoad"
  :immediate-check="false"
>
  <PostItem v-for="item2 in item.postList" :key="item2.id" :postData="item2"/>
</van-list>
  </van-tab>
</van-tabs>
</div>
</template>

<script>
import PostItem from '@/components/myframe/PostItem'
import {  getCategory, getPostlist } from '@/api'
export default {
    components:{
        PostItem
    },
    data () {
        return {
            activeName:0,
            cateList:[],
            postList:[]
        }
    },
    mounted () {
        getCategory().then((res)=>{
 console.log(res);
  this.cateList=res.data.data.map((item)=>{
                return{
                    ...item,
                    postList:[],
                    pageIndex:1,
                    pageSize:5,
                    loading: false,
                    finished: false,
                }
            })
            this.cateList.push({name:"🎃"})
             this.getPostListData()
        })
           
           
      
       
    },
    watch:{
        activeName(index){
            const id=this.cateList[index].id
            if(index===this.cateList.length-1){
                this.$router.push('/mange')
            }
            if(this.cateList[index].postList.length===0){
                this.getPostListData()
            }
        }
    },
    methods:{
        onLoad(){
            console.log(11);
            this.cateList[this.activeName].pageIndex +=1
            this.getPostListData()
        },
        getPostListData(){
          const {id,pageIndex,pageSize}=this.cateList[this.activeName]
        getPostlist({
            category:id,
            pageSize:pageSize,
            pageIndex:pageIndex
        }).then((res)=>{
            console.log(res);
            // this.postList=res.data.data
            // this.cateList[this.activeName].postList=res.data.data
            this.cateList[this.activeName].postList.push(...res.data.data)
            this.cateList[this.activeName].loading=false
            if(this.cateList[this.activeName].postList.length===res.data.total){
              this.cateList[this.activeName].finished=true
            }
        })
        }
    },
    
}
</script>
<style lang="less" scoped>
/deep/ .van-tab:nth-last-child(2){
    background-color: #fff;
    position: sticky;
    right: -9px;
}
.header {
     height: 50px;
     background-color: red;
     padding: 0 15px ;
     display: flex;
     align-items: center;
     color: #ffffff;
     font-size: 14px;
  .iconnew {
     font-size: 50px;
  }

  .search {
      height: 34px;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 34px;
      border-radius: 100px;
      background-color: rgba(255,255,255,0.5);
    .iconfontsearch {
        margin-right: 10px;
    }
    span{
        margin-left: 10px;
    }
  }
.iconwode {
       font-size: 25px;
       margin-left: 10px;
  }
}
</style>